/**
 * 月评 - 面谈准备
 */
import React from 'react';

import { Form } from 'antd';
import { Collapse } from '@/molecules';
import { useCollapse } from '@/hooks';
import { QuestionListFormItem } from '@/containers';
import { usePrepareQuestionsForm, useAssessSetting, usePrepareAlert } from '../hooks';
import { AssessResultDynamic, AssessAbilityResult, BottomAction, PrepareAlert } from '../containers';
import { TRIAL_ACTION } from '../constants';

const { Panel } = Collapse;
// TODO Alert提示语修改
function InterviewPrepareM({ form, data }) {
    const { getSubmitValues } = usePrepareQuestionsForm(form, data?.interviewPrepareVO);
    const { activeKey, onChange, openAll } = useCollapse(['1', '2', '3'], []);
    const { m = {} } = useAssessSetting(data);
    const { message, renderButton } = usePrepareAlert('M', data);
    const assessDetail = React.useMemo(
        () => data?.assessMonthly?.filter(item => item.status !== TRIAL_ACTION.ASSESS_HR_MONTH),
        []
    );
    return (
        <div>
            <PrepareAlert message={message} renderButton={renderButton} />
            <Collapse bordered={false} activeKey={activeKey} onChange={onChange}>
                <AssessResultDynamic data={data} />
                <Panel header="能力评估" key="2">
                    {m.showAssess && <AssessAbilityResult data={assessDetail} levels={data?.assessAbility?.levels} />}
                </Panel>
                <Panel header="面谈自定义问题" key="3">
                    <Form>
                        {form.getFieldDecorator('questions')(
                            <QuestionListFormItem style={{ width: 900 }} form={form} />
                        )}
                    </Form>
                </Panel>
            </Collapse>

            <BottomAction openAll={openAll} data={data} form={form} params={getSubmitValues} />
        </div>
    );
}

export default Form.create({})(InterviewPrepareM);
